<template><div><h2 id="window-location对象" tabindex="-1"><a class="header-anchor" href="#window-location对象"><span>window.location对象</span></a></h2>
<h3 id="引入实验" tabindex="-1"><a class="header-anchor" href="#引入实验"><span>引入实验</span></a></h3>
<p>打开一个网页控制台输入window.location，观察结果<br>
<img src="@source/notes/每周一学/3.第三周学习/1-1.png" alt=""></p>
<ul>
<li>href 页面的url</li>
<li>protocol 对应的协议</li>
<li>host 对应的域名+端口号，如果有端口号的话后面会跟一个端口号</li>
<li>hostname  对应的域名</li>
<li>port 端口号</li>
</ul>
<blockquote>
<p>为啥会看的见端口号？</p>
</blockquote>
<ul>
<li>pathname 域名后面的路径</li>
<li>search 所有的查询参数(以?开头键值对)</li>
<li>hash</li>
</ul>
<blockquote>
<p>。。。 没明白嘛意思 （包含块标识符的DOMString，开头有一个 #。）</p>
</blockquote>
<ul>
<li>username</li>
<li>password</li>
<li>origin</li>
</ul>
<blockquote>
<p>上面的三我没看见啊</p>
</blockquote>
<ul>
<li>assign()  跳转到新的url，相当于页面栈入栈新的页面，也就是可以回退上个页面</li>
<li>reload()  刷新当前页面，可以填一个参数，是否一定向服务器获取资源,可以从缓存中加载页面，默认先从缓存中加载页面，如果缓存中没有则再次向服务器获取资源。</li>
<li>replace() 使用新的网页替换掉当前的网页，也就是说无法回退到上一个页面</li>
<li>toString() 返回页面的url</li>
</ul>
<h2 id="使用location刷新网页" tabindex="-1"><a class="header-anchor" href="#使用location刷新网页"><span>使用location刷新网页</span></a></h2>
<div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>location-study&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#61AFEF">        alert</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"网页刷新了"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        window</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">location</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">reload</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="replace和assign有什么区别" tabindex="-1"><a class="header-anchor" href="#replace和assign有什么区别"><span>replace和assign有什么区别</span></a></h2>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>location-study&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    测试网页</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"test-btn"</span><span style="color:#ABB2BF">>点我跳转&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        let</span><span style="color:#E06C75"> btn</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'test-btn'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        btn</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">onclick</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> ()</span><span style="color:#C678DD">=></span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">            // window.location.assign("https://www.baidu.com/");</span></span>
<span class="line"><span style="color:#E5C07B">            window</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">location</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">replace</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"https://www.baidu.com/"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">       </span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><blockquote>
<p>经过实验，assign直接跳转到百度，同时可以回退到原网页,而replace只可以跳转过去，但是无法退回到原页面</p>
</blockquote>
<h2 id="location对象查询url参数到json对象" tabindex="-1"><a class="header-anchor" href="#location对象查询url参数到json对象"><span>location对象查询url参数到json对象</span></a></h2>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>location-study&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    测试网页</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        let</span><span style="color:#E06C75"> queryParams</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> window</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">location</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">search</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">        if</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">queryParams</span><span style="color:#56B6C2"> !==</span><span style="color:#98C379"> ''</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E06C75">            queryParams</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> queryParams</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">substring</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 去掉？</span></span>
<span class="line"><span style="color:#E06C75">            queryParams</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> queryParams</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">split</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'&#x26;'</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 分割成数组</span></span>
<span class="line"><span style="color:#C678DD">            let</span><span style="color:#E06C75"> params</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> {};</span></span>
<span class="line"><span style="color:#E5C07B">            queryParams</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">forEach</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">item</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">                let</span><span style="color:#ABB2BF"> [</span><span style="color:#E06C75">key</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">value</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#E5C07B"> item</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">split</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'='</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E06C75">                params</span><span style="color:#ABB2BF">[</span><span style="color:#E06C75">key</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#E06C75"> value</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            });</span></span>
<span class="line"><span style="color:#E5C07B">            console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">params</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><blockquote>
<p>参考：<br>
https://developer.mozilla.org/zh-CN/docs/Web/API/Location</p>
</blockquote>
</div></template>


